<template>
  <div class="main_box">
    <div class="topBox">
      <header class="header">
        <div class="left" @click="showLeftCateBox">
          <span class="icon1"><svg-icon icon-class="cata" /></span>
          <span class="icon2">分类</span>
        </div>
        <yd-search v-model="getItemListPostData.key" :on-submit="getGoodsList" cancel-text="" class="searchBox" placeholder="请输入商品名称"/>
        <div class="right">
          <span class="icon1"><svg-icon icon-class="user1" /></span>
          <span class="icon2" @click="clickToUserPage">会员</span>
        </div>
      </header>
      <van-tabs v-model="activeTab" class="tab" color="#ff5a00" @click="handleClick">
        <van-tab title="全部"/>
        <van-tab v-for="(item,index) in cateList" :title="item.name" :key="index"/>
      </van-tabs>
      <div class="buttonGroup">
        <span :class="{activeCondition:activeCondition === 1}" class="tabBtn" @click="clickCondition(1)">
          <span>默认</span>
        </span>
        <span :class="{activeCondition:activeCondition === 2}" class="tabBtn" @click="clickCondition(2)">
          <span>价格</span>
          <span v-if="activeCondition !== 2" class="icon">
            <svg-icon style="position: absolute;" icon-class="up1" />
            <svg-icon icon-class="down1" />
          </span>
          <span v-else-if="sortIcon2" class="icon">
            <svg-icon style="position: absolute;" icon-class="up2" />
            <svg-icon icon-class="down1" />
          </span>
          <span v-else-if="!sortIcon2" class="icon">
            <svg-icon style="position: absolute;" icon-class="up1" />
            <svg-icon icon-class="down2" />
          </span>
        </span>
        <span :class="{activeCondition:activeCondition === 3}" class="tabBtn" @click="clickCondition(3)">
          <span>热销</span>
          <span v-if="activeCondition !== 3" class="icon">
            <svg-icon style="position: absolute;" icon-class="up1" />
            <svg-icon icon-class="down1" />
          </span>
          <span v-else-if="sortIcon3" class="icon">
            <svg-icon style="position: absolute;" icon-class="up2" />
            <svg-icon icon-class="down1" />
          </span>
          <span v-else-if="!sortIcon3" class="icon">
            <svg-icon style="position: absolute;" icon-class="up1" />
            <svg-icon icon-class="down2" />
          </span>
        </span>
        <span :class="{activeCondition:activeCondition === 4}" class="tabBtn" @click="clickCondition(4)">
          <span>新品</span>
          <span v-if="activeCondition !== 4" class="icon">
            <svg-icon style="position: absolute;" icon-class="up1" />
            <svg-icon icon-class="down1" />
          </span>
          <span v-else-if="sortIcon4" class="icon">
            <svg-icon style="position: absolute;" icon-class="up2" />
            <svg-icon icon-class="down1" />
          </span>
          <span v-else-if="!sortIcon4" class="icon">
            <svg-icon style="position: absolute;" icon-class="up1" />
            <svg-icon icon-class="down2" />
          </span>
        </span>
        <span :class="{activeCondition:activeCondition === 4}" class="tabBtn" @click="clickToSwitchShowStatus">
          <span v-if="showPattern"><svg-icon icon-class="totalNum" /></span>
          <span v-else><svg-icon icon-class="cata" /></span>
        </span>
      </div>
    </div>
    <div class="contentbox">
      <tpl-goods-list ref="tplgoodsList" @postData="postData"/>
    </div>
    <cate-list-dialog ref="leftCateBox" :list="cateList" @getCateIdFromDialog="getCateIdFromDialog"/>
    <div v-if="showPattern">
      <div class="bottomBox">
        <div class="left" @click="showBottomList"><svg-icon icon-class="shopCar" />已选商品</div>
        <div class="right">
          <van-button type="danger" size="small" @click="clickToSettlement">立即下单</van-button>
        </div>
      </div>
      <!-- 底部列表显示选择的商品 -->
      <van-actionsheet v-model="bottomList" :overlay="false" class="bottomList">
        <ul class="bottomListContent">
          <li class="bottomListItem topTitle"><span>已选择商品</span> <span @click="hideBottomList" ><svg-icon icon-class="icon_close2"/></span></li>
          <li v-for="(item,index1) in bottomListData" :key="index1" class="bottomListItem">
            <span class="title">{{ item.title }}</span>
            <span v-for="(sku,index2) in item.sku_lists" v-if="sku.buyNum !== 0" :key="sku.sku_id" class="skuItem">
              <span class="skuName">{{ sku.sku_name }}</span>
              <van-stepper :min="0" :step="1" v-model="sku.buyNum" />
              <span class="closeBtn" @click="clickToDeleteSku(index1,index2)">x</span>
            </span>
            <span v-if="item.sku_lists.length === 0" class="skuItem">
              <span class="skuName">无规格</span>
              <van-stepper :min="0" :step="1" v-model="item.buyNum" />
              <span class="closeBtn" @click="clickToDeleteSku(index1,-1)">x</span>
            </span>
          </li>
          <li v-if="bottomListData.length === 0" class="noDataWord">暂无选择的商品</li>
        </ul>
      </van-actionsheet>
    </div>
  </div>
</template>

<script>
import { GetCateList } from '@/api/goods'
import tplGoodsList from '../components/tplGoodsList/index-1'
import cateListDialog from '../components/cateList'
export default {
  components: {
    tplGoodsList,
    cateListDialog
  },
  data() {
    return {
      active: 0,
      activeClass: 'activeClass',
      activeCondition: 1,
      sortIcon2: false,
      sortIcon3: false,
      sortIcon4: false,
      onloadImg: true,
      cateOpen: false,
      activeTab: 0,
      isOpen: false,
      cateList: [],
      goodsList: [],
      form: {
        num: 0
      },
      getItemListPostData: {
        p: 1, // 页数
        limit: 10, // 每页条数
        category_id: '', // 分类id
        has_store: '', // 是否有库存，0=全部，1=只显示有库存的商品,
        key: '',
        is_new: 0, // 是否展示新品标签的商品
        is_recommend: 0, // 是否展示推荐标签的商品
        is_hot: 0, // 是否展示热销标签的商品,3个标签都不选择的话就当没有标签这个条件，都展示
        order: 0,
        // 排序方式
        // 0-默认，
        // 1-价格倒序  2-价格正序，
        // 3-名称倒序  4-名称正序
        // 0-新品倒序  5-新品正序
        // 0-热销倒序  5-热销正序
        shop_id: ''// 商铺id
      },
      postDataToSettlement: {
        item_ids: [],
        sku_ids: [],
        nums: [],
        is_cart: 1
      },
      bottomListData: [],
      bottomList: false,
      showPattern: false
    }
  },
  created() {
    this.getGoodsCateList()
  },
  mounted() {
    switch (this.$route.query.type) {
      case 0:
        this.activeCondition = 1
        break
      case 1:
        this.getItemListPostData.is_new = 1
        this.activeCondition = 4
        break
      case 2:
        this.getItemListPostData.is_hot = 1
        this.activeCondition = 3
        break
      case 3:
        this.getItemListPostData.is_recommend = 1
        break
    }
  },
  methods: {
    // 点击显示左侧分类列表
    showLeftCateBox() {
      this.$refs.leftCateBox.cateOpen = true
    },
    // 清除搜索数据
    clearSearchData(type) {
      let category_id = ''
      let key = ''
      if (type === 0) { // 选择分类
        category_id = ''
        key = ''
      } else if (type === 1) { // 选择排序
        category_id = this.getItemListPostData.category_id
        key = this.getItemListPostData.key
      }
      this.getItemListPostData.category_id = category_id // 分类id
      this.getItemListPostData.key = key
      this.getItemListPostData.is_new = 0 // 是否展示新品标签的商品
      this.getItemListPostData.is_recommend = 0 // 是否展示推荐标签的商品
      this.getItemListPostData.is_hot = 0 // 是否展示热销标签的商品,3个标签都不选择的话就当没有标签这个条件，都展示
      this.getItemListPostData.order = 0 // 排序方式，0=默认，1=商品价格倒序，2=商品价格正序，3=商品名称倒序，4=商品名称正序
    },
    // 点击头部会员
    clickToUserPage() {
      this.$router.push({ name: 'user-center' })
    },
    // 选择分类
    handleClick(index) {
      // todo:bug 连续点击分类,获取数据异步执行有问题
      if (index === 0) {
        this.getItemListPostData.category_id = ''
        this.clearSearchData(0)
      } else {
        this.clearSearchData(0)
        this.getItemListPostData.category_id = this.cateList[index - 1].category_id
      }
      this.activeTab = index
      this.clickCondition(0) // 排序选择默认
    },
    // 选择排序
    clickCondition(tab) {
      this.clearSearchData(1)
      this.activeCondition = tab
      if (this.activeCondition === 2) { // 选中价格
        this.sortIcon2 = !this.sortIcon2
        this.sortIcon3 = false
        this.sortIcon4 = false
        if (this.sortIcon2) {
          this.getItemListPostData.order = 2
          console.log('up')
        } else {
          this.getItemListPostData.order = 1
          console.log('down')
        }
        this.getGoodsList()
      } else if (this.activeCondition === 3) { // 选中销量
        this.sortIcon3 = !this.sortIcon3
        this.sortIcon2 = false
        this.sortIcon4 = false
        this.getItemListPostData.is_hot = 1
        this.getItemListPostData.order = 5
        console.log('选中销量')
        if (this.sortIcon3) {
          this.getItemListPostData.order = 0
        } else {
          console.log('down')
          this.getItemListPostData.order = 5
        }
        this.getGoodsList()
      } else if (this.activeCondition === 4) { // 选中新品
        this.sortIcon4 = !this.sortIcon4
        this.sortIcon3 = false
        this.sortIcon2 = false
        this.getItemListPostData.is_new = 1
        console.log('选中新品')
        if (this.sortIcon4) {
          console.log('up')
          this.getItemListPostData.order = 0
        } else {
          console.log('down')
          this.getItemListPostData.order = 5
        }
        this.getGoodsList()
      } else { // 选中默认
        console.log('选中默认')
        this.getGoodsList()
      }
    },
    // 从左侧弹窗中获取分类id
    getCateIdFromDialog(val) {
      this.activeTab = val.index + 1
      this.$refs.leftCateBox.cateOpen = false
      this.getItemListPostData.category_id = val.id
      this.getGoodsList()
    },
    //  获取商品分类
    getGoodsCateList() {
      GetCateList().then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.cateList = data.data
        }
      })
    },
    // 获取商品列表
    getGoodsList() {
      this.$refs.tplgoodsList.showPattern = this.showPattern // 将显示模式传入列表

      this.$refs.tplgoodsList.isFinished = false
      this.getItemListPostData.p = 1
      this.$refs.tplgoodsList.goodsList = []
      this.$refs.tplgoodsList.finished = false
      this.$refs.tplgoodsList.loading = true
      this.$refs.tplgoodsList.getAllData = false
      this.$refs.tplgoodsList.getItemListFn()
    },
    // 底部组件获取传出的数据
    postData(val) {
      console.log('底部组件获取传出的数据=', val)
      console.log('postDataToSettlement', this.postDataToSettlement)
      let num = 0
      this.bottomListData.forEach(item => {
        if (item.item_id === val.item_id) {
          num++
          if (val.sku_lists.length === 0) {
            item.buyNum++
          } else {
            item.sku_lists.forEach(sku => {
              val.sku_lists.forEach(sku1 => {
                if (sku.sku_id === sku1.sku_id) {
                  sku.buyNum = sku.buyNum + sku1.buyNum
                }
              })
            })
          }
        }
      })
      if (num === 0) {
        this.bottomListData.push(val)
      }
    },
    // 点击去结算
    clickToSettlement() {
      this.bottomListData.forEach(item => {
        if (item.sku_lists.length === 0) {
          this.postDataToSettlement.item_ids.push(item.item_id)
          this.postDataToSettlement.sku_ids.push('')
          this.postDataToSettlement.nums.push(item.buyNum)
        }
        item.sku_lists.forEach((sku, index) => {
          if (sku.buyNum !== 0) {
            this.postDataToSettlement.item_ids.push(sku.item_id)
            this.postDataToSettlement.sku_ids.push(sku.sku_id)
            this.postDataToSettlement.nums.push(sku.buyNum)
          }
        })
      })
      if (this.postDataToSettlement.item_ids && this.postDataToSettlement.item_ids.length !== 0) {
        this.$router.push({ name: 'shop-settlement', query: {
          itemData: JSON.stringify(this.postDataToSettlement)
        }})
      } else {
        this.$toast({
          duration: 1500,
          message: '您还没有选择商品'
        })
      }
    },
    // 点击显示底部选择过得列表
    showBottomList() {
      this.bottomList = !this.bottomList
      console.log('this.bottomListData', this.bottomListData)
    },
    // 点击隐藏底部列表
    hideBottomList() {
      this.bottomList = !this.bottomList
    },
    // 点击删除已选择过的商品
    clickToDeleteSku(index1, index2) {
      if (index2 !== -1) { // 删除商品中这一条sku
        this.bottomListData[index1].sku_lists[index2].buyNum = 0
        let num = 0
        this.bottomListData[index1].sku_lists.forEach(sku => {
          if (sku.buyNum !== 0) {
            num++
          }
        })
        if (num === 0) {
          this.bottomListData.splice(index1, 1)
        }
      } else { // 删除无规格的商品
        this.bottomListData.splice(index1, 1)
      }
    },
    // 切换模式
    clickToSwitchShowStatus() {
      this.showPattern = !this.showPattern
      this.$refs.tplgoodsList.showPattern = this.showPattern // 将显示模式传入列表
    }
  }
}
</script>
<style lang="scss">
  @import "src/styles/mixin.scss";
  .header{
    width: 100%;
    padding: 0 pxCalc(20px);
    position: relative;
    background-color: #fff;
    .yd-search{
      width: 100%;
      height: 100%;
      .yd-search-input{
        padding: pxCalc(10px) pxCalc(35px) pxCalc(10px) pxCalc(35px);
        background-color: #fff;
        .search-input{
          margin: 0;
          width: 100%;
          height: pxCalc(30px);
          line-height: pxCalc(30px);
          background-color: #f5f5f5;
          border-radius: pxCalc(30px);
        }
        .yd-input>input{
          color: #999;
          height: pxCalc(30px);
          line-height: pxCalc(30px);
        }
      }
      .yd-search-input>.cancel-text{
        padding-right: 0;
      }
      .yd-input-clear{
        padding-right: pxCalc(10px);
      }
      .yd-search-input:after, .yd-search-input:before{
        height: 0;
      }
    }

  }
  .tab{
    background-color: #fff;
    .van-tabs__wrap{
      padding: 0 pxCalc(10px);
    }
    .van-hairline--top-bottom::after{
      border: none!important;
    }
  }
  .main_box .van-actionsheet{
    z-index: 97!important;
    bottom: pxCalc(54px) !important;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .topBox{
    position: fixed;
    top: 0;
    z-index: 9;
    width: 100%;
    .cateList{
      position: fixed;
      top: pxCalc(50px);
      left: pxCalc(20px);
      width: pxCalc(100px);
      overflow-x: hidden;
      background-color: #fff;
      border: 1px solid #eee;
      box-shadow: 0 pxCalc(2px) pxCalc(20px) rgba(0,0,0 ,0.1);
      z-index: 999999;
      .cateItem{
        display: block;
        padding: pxCalc(10px) pxCalc(20px);
        border-bottom: 1px solid #eee;
      }
      .cateItem:last-of-type{
        border-bottom: none;
      }
    }
    .header{
      height: pxCalc(50px);
      line-height: pxCalc(50px);
      text-align: center;
      display: flex;
      justify-content: space-between;
      .left{
        padding-left: 20px;
        padding-right: 15px;
        height: 100%;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        display: flex;
        text-align: center;
        flex-direction: column;
        color: #999;
      }
      .searchBox{
        line-height: 100%;
        height: 100%;
        width: 100%;
      }
      .right{
        padding-left: 15px;
        padding-right: 20px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        text-align: center;
        flex-direction: column;
        color: #999;
      }
      .icon1{
        height: 50%;
        line-height: pxCalc(40px);
        font-size: pxCalc(18px);
        display: inline-block;
      }
      .icon2{
        height: 50%;
        line-height: pxCalc(30px);
        display: inline-block;
      }
    }
  }
  .contentbox{
    padding-top: pxCalc(140px);
    /*padding-bottom: pxCalc(55px);*/
  }
  .buttonGroup{
    width: 100%;
    z-index: 1;
    height: pxCalc(40px);
    background-color: #fff;
    border-top: 1px solid #eee;
    line-height: pxCalc(40px);
    font-size: pxCalc(13px);
    /*position: absolute;*/
    display: flex;
    justify-content: space-between;
    .activeCondition{
      color: #ff5a00;
    }
    span{
      display: inline-block;
      text-align: center;
    }
    .tabBtn{
      display: flex;
      width: 25%;
      justify-content: center;
      .icon{
        display: flex;
        font-size: pxCalc(14px);
        flex-direction: column;
        justify-content: center
      }
    }
  }
  .contentbox{
    padding-top: pxCalc(135px);
    margin-top: pxCalc(5px);
    /*padding-bottom: pxCalc(60px);*/
  }
  .backTop{
    position: fixed;
    right: 0;
    bottom: pxCalc(100px);
    width: pxCalc(40px);
    height: pxCalc(40px);
    text-align: center;
    line-height: pxCalc(40px);
    font-size: pxCalc(25px);
    background-color: rgba(0,0,0,0.5);
  }
  .bottomBox{
    z-index: 98;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    height: pxCalc(55px);
    background-color: #fff;
    width: 100%;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    .left{
      font-size: pxCalc(16px);
    }
  }
  .bottomList{
    .bottomListContent{
      width: 100%;
      max-height: pxCalc(300px);
      overflow-y: scroll;
      background: #fff;
      padding-top: pxCalc(40px);
      .bottomListItem{
        border-bottom: 1px solid #eee;
        padding: 0 pxCalc(20px);
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title{
          padding: pxCalc(5px) 0;
          font-weight: bold;
          width: 100%;
          text-overflow: ellipsis;
          word-break: normal;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .skuItem{
          padding: pxCalc(5px) pxCalc(10px);
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #eee;
          .skuName{
            width: 50%;
            text-overflow: ellipsis;
          }
        }
      }
      .topTitle{
        position: absolute;
        top: 0;
        z-index: 1;
        border-top: 1px solid #eee;
        background-color: #fff;
        padding: pxCalc(10px) pxCalc(20px);
        flex-direction: row;
      }
      .closeBtn{
        padding: 0 pxCalc(6px);
        border-radius: 50%;
        /*background-color: #eee;*/
      }
      .noDataWord{
        width: 100%;
        padding: pxCalc(20px);
        text-align: center;
      }
    }
  }
</style>
